<html>
<head>
  <style>
    body > * { background-color: #eee; margin-bottom: 20px }
    body > div > div { background-color: #f008; min-height: 20px }
  </style>
</head>
<body>
  <h1>Layout tests</h1>

  <div>
    <div style="width: 100px; height: 20px"></div>
    <div style="width: 200px; height: 20px"></div>
  </div>

  <!-- TODO: ignore comments and empty text nodes -->
  <div style="display: flex; width: 200px; height: 20px"><span style="flex: 1"></span><span style="flex: 2"></span></div>

  <!--
  <div style="position: relative; height: 20px">
    <div style="width: 50%">A</div>
    <div style="position: absolute; top: 0; left: 25%; width: 50%">B</div>
  </div>

  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>23</td>
    </tr>
    <tr>
      <td>Thomas Johnson</td>
      <td>32</td>
    </tr>
  </table>

  <div style="display: flex; height: 30px">
    <div style="width: 20px; height: 20px"></div>
    <div style="flex-basis: 20px; height: 10px"></div>
    <div style="flex-grow: 1; height: 20px"></div>
    <div style="flex-grow: 2; height: 10px"></div>
  </div>

  <div style="display: flex">
    <div style="line-height: 10px; margin-right: 10px;">XXX</div>
    <div style="line-height: 20px; margin-right: 10px;">XXX</div>
    <div style="line-height: 30px">XXX</div>
  </div>
  -->
</body>
</html>
